<template>
  <Modal
    v-model="value"
    title="登录记录"
    :styles="{top: '20px',bottom:'20px',width:'80%',}"
    :scrollable=false>
    <List size="small" border style="margin:0.5rem;text-align: left">
      <div v-if="recordList==null || recordList.length==0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem v-for="(item,index) in recordList" class="item_hover">
          <i-col flex="auto">

<!--            <KeyValueView title="用户名" >{{item.encodeName==''?item.userName:item.encodeName}}-->
<!--            </KeyValueView>-->
            <i-col flex="auto">
              <KeyValueView title="登录方式"  >
                {{deviceTypeLabel(item.deviceType)+'端'+$getDictLabel('loginTypeDict',item.loginOpt)}}
              </KeyValueView>
              <KeyValueView title="客户IP"  >
                {{item.clientIp}}
              </KeyValueView>
            <KeyValueView title="登录时间"  >
              {{$tiyBJTime(item.optTime)}}
            </KeyValueView>
            <KeyValueView title="app版本" v-show="item.version!=0" >
              {{item.version===0?'':item.version}}
            </KeyValueView>
            </i-col>
          </i-col>

        </ListItem>
      </div>
    </List>

    <Page :total="showRecord.total" :page-size="showRecord.pageSize"
          :current="showRecord.pageNum" @on-change="changeRecordPage"
          show-elevator/>
  </Modal>

</template>

<script>
import KeyValueView from "../widgets/KeyValueView";
export default {
  name: "UserLoginRecord",
  components:{KeyValueView},
  data(){
    return {
      showDialog:false,
      showRecord: {
        userId: '',
        pageNum: 1,
        pageSize: 40,
        total: 1
      },
      recordList:[],
      tableRecordTitles:[
        {
          type: 'index',
          title: '#',
          width: 80,
          align: 'center'
        },
        {
          title: '用户名',
          key: 'userName',
          width: 150,
          align: 'center',
          render: (h, params) => {
            var encodeName = params.row.encodeName;
            if(encodeName==''){
              encodeName = params.row.userName;
            }
            return h('div', encodeName);
          }
        },
        {
          title: '登录时间',
          key: 'optTime',
          align: 'center',
          render: (h, params) => {
            return h('div', self.$tiyBJTime(params.row.optTime));
          }
        },
        {
          title: 'app版本',
          key: 'version',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.version===0?'':params.row.version );
          }
        },
        {
          title: '登录方式',
          key: 'loginOpt',
          align: 'center',
          render: (h, params) => {
            var way = '';
            data.loginTypeDict.forEach(function (item) {
              if (item.value === params.row.loginOpt) {
                way = item.name;
              }
            });
            return h('div', way);
          }
        },
        {
          title: '终端类型',
          key: 'deviceType',
          align: 'center',
          render: (h, params) => {
            let device = '';
            switch(params.row.deviceType){
              case 1:
                device = 'Android';
                break;
              case 2:
                device = 'IOS';
                break;
              case 3:
                device = 'PC';
                break;
              case 4:
                device = 'Mobile PC';
                break;
              default:
                break;
            }
            return h('div', device);
          }
        },
        {
          title: '客户端IP',
          key: 'clientIp',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.clientIp);
          }
        },
      ],
    }
  },
  props:{
    value:{
      type:Boolean,
      default:false
    },
    userId:{
      type:String,
      default:""
    },
    sortBy:{
      type:String,
      default:""
    },
  },
  computed:{

  },
  methods: {
    changeRecordPage(page) {
      this.showRecord.pageNum = page;
      this.webRecordList(this);
    },
    webRecordList(self) {
      self.$Spin.show();
      self.$apiUser.getLoginRecords({
        "userId": this.userId,
        "pageNum": self.showRecord.pageNum,
        "pageSize": self.showRecord.pageSize,
      }).then(function (response) {
        self.$Spin.hide();
        if (response.success) {
          self.recordList.splice(0);
          let recordPage = response.result;
          self.showRecord.pageSize = recordPage.pageSize;
          self.showRecord.total = recordPage.total
          recordPage.list.forEach(
            function (item) {
              self.recordList.push(item);
            }
          );
        } else {
          self.$Message.error(response.errorMessage);
        }
      });
    },
    deviceTypeLabel(deviceType){
      let device = '';
      switch(deviceType){
        case 1:
          device = 'Android';
          break;
        case 2:
          device = 'IOS';
          break;
        case 3:
          device = 'PC';
          break;
        case 4:
          device = 'Mobile PC';
          break;
        default:
          break;
      }
      return device;
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
      if(val){
        this.webRecordList(this)
      }
      this.$emit('input',val);
      }
    }
  },
  mounted() {


  }
}
</script>

<style scoped>

</style>
